<template>
  	<div class="box">
		<!-- tab选项卡 -->
    	<van-tabs class="tabs" v-model="active" @change="clickTabs">
      		<van-tab title="全部"></van-tab>
      		<van-tab title="已支付"></van-tab>
      		<van-tab title="待支付"></van-tab>
      		<van-tab title="退款"></van-tab>
    	</van-tabs>
		<div class="mt60"></div>
		<!-- 列表 -->
		<van-skeleton title :row="3" :loading="loading"> 
          	<div class="order-list" v-if="orderList.length>0">
          		<div v-for="items in orderList" :key="items.orderNumber">
            		<!-- v-if="showFn(items)" -->
            		<div class="items" @click="orderDetail(items)">
						<div class="tips">
							<img v-if="items.refundStatus==1" src="@/assets/img/icon/tkz.png" alt="" srcset="">
							<img v-if="items.refundStatus==2" src="@/assets/img/icon/ytk.png" alt="" srcset="">
							<img v-if="items.status <= 20" src="@/assets/img/icon/dzf.png" alt="" srcset="">
							<img v-if="(items.status >= 25 && items.status <= 35) && !items.refundStatus" src="@/assets/img/icon/yzf.png" alt="" srcset="">
						</div>
              			<div class="top">
                			<p class="title">大厂全顺机动车检测有限公司</p>
                			<div class="clearfix">
                  				<img class="fl" src="@/assets/img/company-img.png" />
								<div class="fl center">
									<p>客户姓名：{{items.username}}</p>
									<p>号牌号码：{{items.carNum}}</p>
									<p v-if="items.orderType">
									车检类型：{{items.orderType === 1?'综检':items.orderType === 2?'综检':items.orderType === 7?'六年免检':'其他类别检测'}}
									</p>
									<p v-else>车检类型：{{items.type ===3?'到场检测':'预约检测'}}</p>
									<p>提交时间：{{items.dateStr}}</p>
									<!-- <p>车检进度：</p> -->
								</div>
                  				<div class="fr">
									<div class="del">
										<!-- <button @click.stop="delOrder(items)">删除订单</button> -->
									</div>
                    				<div>
                      					<button v-if="state" @click.stop="buttonClick(items)">查询进度</button>
                      					<span v-else>
											<!-- <button
											class="fr"
											v-if="orderState.length"
											@click="buttonClick(items)"
											>{{stateFn(items)}}</button> -->
											<button
											v-if="stateFn(items)"
											@click.stop="buttonClick(items)"
											>{{stateFn(items)}}</button>
										</span>
                    				</div>
                  				</div>
                			</div>
                		</div>
						<!-- <div class="btm">
							<ul>
							<li>
								<div class="title">车辆类型</div>
								<div class="con">{{items.carType}}</div>
							</li>
							<li>
								<div class="title">燃油类型</div>
								<div class="con">{{items.statusStr}}</div>
							</li>
							<li>
								<div class="title">注册日期</div>
								<div class="con"  v-if="items.carRegNum">{{items.carRegNum.substring(0,4)+'年'+items.carRegNum.substring(4,6)+'月'+items.carRegNum.substring(6)+'日'}}</div>
							</li>
							</ul>
						</div> -->
               		</div>
              	</div>
            </div>
            <div v-else class="no_data">
              	<p>当前无可查询订单...</p>
              	<p>如需办理年检业务</p>
              	<p>请您在预约车检测或到场检测提交车辆信息后重试</p>
            </div>
        </van-skeleton>
        <van-dialog @confirm="deleteCarOrder" v-model="delshow" title="提示" message="确定永久删除该订单？" show-cancel-button></van-dialog>
      	<foot :navUrl="url"/>
  	</div>
</template>

<script>
	import { getLocal } from '@/utils/storage'
	import { getDate } from '@/utils/index'
	import foot from '@/views/footer.vue'
	export default {
  		name: 'order',
  		data() {
			return {
				active: 0,//当前选中选项卡
				delshow:false,
				carUser: JSON.parse(getLocal('userInfo')),
				orderList: [],
				orderState: [],
				// notLen: 0,
				state: null,
				loading:false,
				url:'/',
				id:null,
				list:[],
			}
  		},
		created() {
			console.log('------this.$route-------',this.$route)
			if (this.$route.query.state === 'progress') {
				this.state = true
				window.title = '进度详情'
			}
			this.dataDir('carOrderStatus')
			this.queryOrder(0)
		},
		mounted() {
			document.getElementsByTagName('html')[0].style.backgroundColor = '#f5f6f5'
		},
		methods: {
			//切换tabs
			/**
			 * 切换tabs
			 * name:0,title:全部
			 * name:1,title:已支付
			 * name:2,title:待支付
			 * name:3,title:退款
			 */
			clickTabs(name,title){
				console.log(name,title)
				switch (name) {
					case 0:
						console.log('展示全部订单')
						this.queryOrder(name)
						break;
					case 1:
						console.log('展示已支付订单')
						this.queryOrder(name)
						break;
					case 2:
						console.log('展示待支付订单')
						this.queryOrder(name)
						break;
					default:
						console.log('展示退款订单')
						this.queryOrder(name)
						break;
				}
			},
			//删除订单
			delOrder(el){
				console.log('删除订单----',el)
				this.delshow = true
				this.id = el.id
			},
			async deleteCarOrder(){
				let res = await this.$api.deleteCarOrder({id:this.id});
				if (res.status === 200) {
					this.$toast(res.message)
					this.queryOrder()
				}
				console.log('res------------删除订单',res)
			},

			// 车检数据查询
			async queryOrder(e) {
				let params = {
					userId: this.carUser.id,
					type:e
				}
				this.loading = true
				let res = await this.$api.queryOrder(params)
				this.loading = false
				console.log('res>>>>>>>>>>>>>>>>>>',res)
				if (res) {
					let data = res.data
					if (data && data.list.length !== 0) {
						this.orderList = data.list.map(el => {
							el.dateStr = getDate(el.updateTime).h
							return el
						})
						this.list = data.carUserCoupons
					} else {
						this.orderList = []
					}
				}
				

				console.log(this.orderList.length, '------------------- 车检数据查询 ----------------')
			},
			// 获取车辆数据字典
			async dataDir(e) {
				let res = await this.$api.dataDir({
					type: e
				})
				console.log(res, '------------------- 获取车辆数据字典 ----------------')
				if (res.status === 200 && res.data) {
					console.log(JSON.stringify(res.data.list))
					this.orderState = res.data.list
				}
			},
			//按钮
			buttonClick(el) {
				console.log(el, 'el')
				el.list = this.list
				if (this.state) {
					this.$router.push({
						name: 'progress',
						params: {
							carInfo: el
						}
					})
				} else {
					// 点击缴费
					if (el.status <= 20) {
						this.$router.push({
							name: 'orderPay',
							params: {
							carInfo: el
							}
						})
					}
					/* // 打印单据
					if (el.status >= 25 && el.status <= 35) {
						this.$router.push({
							name: 'printDetails',
							params: {
								carInfo: el
							}
						})
					} */
					// 查询进度
					if (el.status >= 25 && el.status <= 35) {
						this.$router.push({
							name: 'progress',
							params: {
								carInfo: el
							}
						})
					}
					// 点击评价
					if (el.status >= 60) {
					}
				}
			},
			// 工具
			stateFn(row) {
				// 单据打印完成
				if (row.status >= 25 && row.status <= 35) {
					return '查询进度'
				}

				// 还没支付
				if (row.status <= 20) {
					return '点击缴费'
				}

				// 订单完成
				if (row.status >= 60) {
					return '点击评价'
				}
				// return row.status
			},
			//订单详情
			orderDetail(e){
				e.list = this.list
				console.log('跳转订单详情---------',e)
				this.$router.push({
					name: 'orderDetails',
					params: {
						order: e
					}
				})
			},
			// 显示订单查询 可看进度
			/* showFn(row) {
				if (this.$route.query.state === 'progress') {
					if (row.status >= 25 && row.status != 40) {
						this.notLen++
						return
					}
				}
			} */
		},
		beforeRouteLeave(to, from, next) {
			document.getElementsByTagName('html')[0].style.backgroundColor = '#fff'
			next()
		},
		components:{
			foot
		}
	}
</script>

<style lang="less" scoped>
	.order-list {
		
  		.items {
			width: 94%;
			border-radius: 0.16rem;
			background-color: #fff;
			margin: 0.4rem auto 0;
			position: relative;
    		.tips{
				position: absolute;
				left: 40%;
				top:0.4rem;
				img{
					width: 3rem;
					height: auto;
					transform: rotate(30deg);
				}
    		}
    		.top{
      			padding: 0 0.16rem 0.267rem 0.253rem;
				img {
					width: 1.88rem;
					height: 1.827rem;
					margin-right: 0.267rem;
					//margin-top: 0.2rem;
				}
    		}
			.title {
				font-size: 0.253rem;
				color: #706d6d;
				height: 0.8rem;
				line-height: 0.8rem;
			}
    		.center {
      			padding-top: 0.053rem;
				p {
					font-size: 0.35rem;
					line-height: 0.467rem;
					color: #867b79;
					letter-spacing: 0.027rem;
				}
    		}
			.del{
				margin-bottom:0.3rem;
			}
    		button {
				padding: 0 0.2rem;
				width: 2rem;
				height: 0.667rem;
				line-height: 0.667rem;
				text-align: center;
				font-size: 0.35rem;
				color: #fff;
				background-color: #fd4b05;
				letter-spacing: 0.027rem;
				border: 0;
				border-radius: 0.32rem;
				margin: 6% 0;
				margin-right: 1%;
    		}
    		.btm{
      			ul{
					display:flex;
					justify-content: space-between;
					padding: 0.2rem 0;
					background-color: #fafafa;
					border-radius: 0 0 0.16rem 0.16rem;
        			li{
						width: 33.333%;
						text-align: center;
						border-left: 1px solid #fff;
						.title{
							font-size: 0.24rem;
							color: #5d5d5d;
						}
						.con{
							font-size: 0.24rem;
							color: #a78339;
						}
        			}
					li:first-child{
						border-left: 0;
					}
      			}
    		}
  		}
	}
	.no_data{
		width: 84%;
		margin:0.75rem auto;
		font-size:0.373rem;
		line-height: 0.6rem;
		text-align: center;
		color:#999;
	}
	.box{
		.tabs{
			position: fixed;
			left: 0;
			top:0;
			z-index: 999;
			width: 100%;
		}
		.mt60{
			margin-top: 60px;
		}
	}
	
</style>